<template>
    <div class="register">
        <h4>注册就送10元彩豆</h4>
        <section class="formcon">
            <dl>
                <dd>
                    <img src="//common-1253410441.file.myqcloud.com/activityimg/20171211190411.png" alt="">
                    <label for="">
                        <input type="tel" v-model="phone" placeholder="请输入手机号"></label>
                </dd>
                <dd class="yzm">
                    <img src="//common-1253410441.file.myqcloud.com/activityimg/20171211190412.png" alt="">
                    <label for="">
                        <input type="tel" v-model="yzm" placeholder="请输入验证码"> <a
                            :class="[sending?'disable':'','countdown']"
                            href="javascript:;" @click="getyzm">{{countTime}}</a></label>
                </dd>
                <dd>
                    <img src="//common-1253410441.file.myqcloud.com/activityimg/20171211190409.png" alt="">
                    <label for="">
                        <input type="password" v-model="pwd" placeholder="6~16位密码"></label>
                </dd>
                <a class="regsubmit" href="javascript:;" @click="register">立即注册</a>
                <div class="agree">注册即代表我已同意《用户服务协议》</div>
            </dl>
        </section>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import {registersimR, registerR} from '../../service/home';
    import {Countdown} from '../../uitls/timer';
    import {isphone} from '../../uitls/common';
    export default {
        components: {
            myButton: Button,
        },
        data() {
            return {
                phone: '',
                yzm: '',
                pwd: '',
                ucode: '',
                countTime: '获取验证码',
                sending: false
            };
        },
        created() {
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            async getyzm(){
                const {phone}=this;
                if(this.sending) {
                    return;
                }
                if(!isphone(phone)) {
                    this.$vux.toast.text('请输入正确的手机号');
                    return;
                }
                const {data}=await registersimR(phone);
                if(data && data.code === 0) {
                    this.sending = true;
                    this.countdown();
                    this.ucode = data.data
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async register(){
                const {phone, yzm, pwd, ucode}=this;
                const {data}=await registerR({phone, yzm, pwd, ucode});
                if(data && data.code === 0) {
                    this.$vux.toast.show({
                        text: '注册成功'
                    })
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            countdown(){
                let countdowns = new Countdown(59000, (data, isend)=> {
                    if(isend) {
                        this.sending = false;
                        this.countTime = `获取验证码`;
                    }
                    else {
                        this.countTime = `${data[0]}秒后获取`;
                    }
                }, 0);
                countdowns.start();
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .register {
        background: #fff;
        height: 100%;
        h4 {
            line-height: 200px;
            color: @colororange;
            text-align: center;
            font-size: @fz62;
        }
        .formcon {
            width: 590px;
            margin: 0 auto;
            dl {
                dd {
                    margin-bottom: 30px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    &.yzm {
                        input {
                            width: 300px;
                            line-height: 90px;
                        }
                    }
                    img {
                        width: 48px;
                        height: 48px;
                        margin-right: 30px;
                    }
                    label {
                        border-bottom: 1px solid @color12;
                        display: flex;
                        height: 90px;
                        padding-left: 22px;
                        width: 100%;
                        input {
                            flex: 1;
                            font-size: @fz36;
                            height: 100%;
                        }
                        .countdown {
                            height: 50px;
                            border-radius: 4px;
                            border: 1px solid @color22;
                            text-align: center;
                            line-height: 50px;
                            box-sizing: border-box;
                            color: @color22;
                            padding: 0 10px;
                            &.disable {
                                border: 1px solid #e6e6e6;
                                color: @color3;
                            }
                        }
                    }
                }
            }
            .regsubmit {
                width: 636px;
                height: 86px;
                line-height: 86px;
                color: #fff;
                background: @colororange;
                display: block;
                margin: 0 auto;
                text-align: center;
                border-radius: 8px;
                margin-top: 80px;
                font-size: @fz36;
                font-weight: bold;
            }
            .agree {
                font-size: @fz24;
                color: #969696;
                display: block;
                text-align: center;
                margin-top: 60px;
            }
        }
    }

</style>